<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>news</title>
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/themes/color.css">
    <link rel="stylesheet" type="text/css" href="https://www.jeasyui.com/easyui/demo/demo.css">
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
    <script src="../public/jquery.serializejson.min.js"></script>
    <script src="https://cdn.bootcss.com/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="https://www.jeasyui.com/easyui/datagrid-detailview.js"></script>
</head>

<body>
    <div class="easyui-layout" data-options="fit:true" id="cc">
        <!-- 左边 -->
        <div data-options="region:'west',split:true" title="目录" style="width:200px;">
            <div id="tt"></div>
        </div>
        <!-- 中间 -->
        <div data-options="region:'center',title:'新闻',iconCls:'icon-ok'">
            <table id="dg"></table>
            <div id="dlg" class="easyui-dialog" title="Basic Dialog" style="width:600px;height:400px;padding:10px"
                data-options="closed:true">
                <!-- 表单 -->
                <form id="ff" class="easyui-form" method="post" data-options="novalidate:true">
                    <!-- id -->
                    <div style="display: none">
                        <input class="easyui-textbox" name="_id" style="width:100%">
                    </div>
                    <!-- cateId -->
                    <div style="display: none">
                        <input class="easyui-textbox" name="cateId" style="width:100%">
                    </div>
                    <!-- 姓名 -->
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="title" style="width:100%" data-options="label:'title:',required:true">
                    </div>
                    <!-- 密码 -->
                    <div style="margin-bottom:20px">
                        <input class="easyui-textbox" name="content" style="width:100%" data-options="label:'content:',required:true">
                    </div>
                    <!-- 提交按钮 -->
                    <div style="text-align:center;padding:5px 0">
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submit()" style="width:80px">Submit</a>
                        <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">Clear</a>
                    </div>
            </div>
        </div>
        <!-- 搜索 -->
        <div id="dlg2" class="easyui-dialog" title="Basic Dialog" style="width:400px;height:150px;padding:10px"
            data-options="closed:true">
            <input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:100%">
        </div>
    </div>
</body>
<script>
    var cid = {};
    var idArr = {};
    //添加与批量删除
    var toolbar = [{
        text: 'Add',
        iconCls: 'icon-add',
        handler: function () {
            // console.log(cid);
            $('#ff').form('load', cid);
            $('#dlg').dialog('open');
        }
    }, {
        text: 'Cut',
        iconCls: 'icon-cut',
        handler: function () {
            $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
                if (r) {
                    removes();
                }
            });

        }
    }];

    //搜索
    function doSearch(Value) {
        $('#dlg2').dialog('close');
        $('#dg').datagrid({
            url: 'http://localhost:3000/news/search',
            method: 'post',
            pagination: 'true',
            fit: true,
            toolbar: toolbar,
            queryParams: {
                title: Value
            },
            columns: [
                [{
                        field: 'ck',
                        checkbox: true
                    },
                    {
                        field: 'title',
                        title: 'title',
                        width: 200
                    },
                    {
                        field: 'content',
                        title: 'content',
                        width: 400
                    },
                    {
                        field: '_id',
                        title: '操作',
                        formatter: function (val, row, index) {
                            return `<a href="javascript:;" onclick="formShow('${val}');">修改</a> <a href="javascript:;" onclick="delData('${val}');">删除</a> <a href="javascript:;" onclick="commentShow('${val}')" data-url="./comment.html" id="toComment">评论</a>`;
                        }
                    },
                    {
                        field: 'cateId',
                        hidden: true
                    },
                ]
            ]
        });
    }


    //显示目录
    $('#tt').tree({
        url: 'http://localhost:3000/cate/list/1',
        method: 'post',
        onClick: function (node) {
            window.cid = {
                cateId: node._id
            }

            var ids = $('#tt').tree('getChildren', node.target);
            idArr = [];
            idArr.push(node._id);
            for (var i in ids) {
                idArr.push(ids[i]._id)
            }
            getCate();
        }
    });
    //获取分类
    function getCate() {
        $('#dg').datagrid({
            url: 'http://localhost:3000/news/list',
            method: 'post',
            pagination: 'true',
            fit: true,
            toolbar: toolbar,
            queryParams: {
                ids: idArr
            },
            columns: [
                [{
                        field: 'ck',
                        checkbox: true
                    },
                    {
                        field: 'title',
                        title: 'title',
                        width: 200
                    },
                    {
                        field: 'content',
                        title: 'content',
                        width: 400
                    },
                    {
                        field: '_id',
                        title: '操作',
                        formatter: function (val, row, index) {
                            return `<a href="javascript:;" onclick="formShow('${val}');">修改</a> <a href="javascript:;" onclick="delData('${val}');">删除</a> <a href="javascript:;" onclick="commentShow('${val}')" data-url="./views/comment.html" id="toComment">评论</a>`;
                        }
                    },
                    {
                        field: 'cateId',
                        hidden: true
                    },
                ]
            ]
        });
    }
    //新闻数据初始化
    $('#dg').datagrid({
        url: 'http://localhost:3000/news/list',
        pagination: 'true',
        fit: true,
        toolbar: [{
            text: 'Cut',
            iconCls: 'icon-cut',
            handler: function () {
                $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
                    if (r) {
                        removes();
                    }
                });

            }
        }, {
            text: '搜索',
            iconCls: 'icon-search',
            handler: function () {
                $('#dlg2').dialog('open');
            }
        }],
        columns: [
            [{
                    field: 'ck',
                    checkbox: true
                },

                {
                    field: 'title',
                    title: 'title',
                    width: 200
                },
                {
                    field: 'content',
                    title: 'content',
                    width: 400
                },
                {
                    field: '_id',
                    title: '操作',
                    formatter: function (val, row, index) {
                        // console.log(val);
                        // console.log(row);
                        return `<a href="javascript:;" onclick="formShow('${val}');">修改</a> <a href="javascript:;" onclick="delData('${val}');">删除</a> <a href="javascript:;" data-url="./views/comment.html" onclick="commentShow('${val}')"  id="toComment">评论</a>`;
                    }
                },
                {
                    field: 'cateId',
                    hidden: true
                },
            ]
        ],


        view: detailview,
        detailFormatter: function (index, row) {
            return '<div style="padding:5px;height:80px;"><table class="ddv"></table></div>';
        },
        onExpandRow: function (index, row) {
            console.log(row);
            var ddv = $(this).datagrid('getRowDetail', index).find('table.ddv');
            ddv.datagrid({
                url: 'http://localhost:3000/comment/getCounts',
                loadMsg: '加载中，请稍后...',
                fit: true,
                queryParams: {
                    cateId: row._id
                },
                columns: [
                    [{
                        field: 'total',
                        title: '评论',
                        width: '100%',
                        align:'right'
                    }]
                ]
            })
        }

    });

    // 表单提交
    function submit() {
        $('#ff').form('submit', {
            onSubmit: function () {
                var formData = $('#ff').serializeJSON();
                // console.log(formData);
                if (formData._id) {
                    $.ajax({
                        type: 'put',
                        url: `http://localhost:3000/news/${formData._id}`,
                        data: formData,
                    }).done(res => {
                        $('#dg').datagrid('reload'); //表格数据刷新
                    })
                    $('#dlg').dialog('close'); //关闭对话框
                    $('#dlg').form('clear');
                } else {
                    delete formData._id;
                    if ($(this).form('enableValidation').form('validate')) {
                        $.ajax({
                            type: 'post',
                            url: 'http://localhost:3000/news',
                            data: formData,
                        }).done(res => {
                            $('#dg').datagrid('reload'); //表格数据刷新
                        })
                        $('#dlg').dialog('close'); //关闭对话框
                        $('#dlg').form('clear');
                    } else {
                        console.log('aaa');
                    }
                }
            }

        });

    }

    //清空
    function clearForm() {
        $('#dlg').form('clear');
    }
    //输入框
    function formShow(id) {
        $.ajax({
            type: 'get',
            url: `http://localhost:3000/news/${id}`
        }).done(res => {
            $('#dlg').dialog('open');
            // console.log(res);
            $('#ff').form('load', res);
        })

    }
    //评论
    function commentShow(id) {
        $.cookie('cateId', id, {
            expires: 7
        });
        parent.window.addTabs('comment', "./views/comment.html", id);
    }
    // 批量删除
    function removes() {
        var datas = $('#dg').datagrid('getSelections');
        var ids = [];
        for (var i = 0; i < datas.length; i++) {
            ids.push(datas[i]._id);
        }
        $.ajax({
            url: 'http://localhost:3000/news/removes',
            type: 'post',
            data: {
                ids: ids.toString()
            }
        }).done(function () {
            $('#dg').datagrid('reload'); //表格数据刷新
        })
    }
    //删除
    function delData(val) {
        $.messager.confirm('提醒', 'Are you confirm this?', function (r) {
            if (r) {
                $.ajax({
                    type: 'delete',
                    url: `http://localhost:3000/news/${val}`
                }).done(function () {
                    $('#dg').datagrid('reload'); //表格数据刷新
                });

            }
        });

    }
</script>

</html>